<template>
  <div class="detail-base">
    <t-card title="会员基本信息" :bordered="false">
      <div v-if="memberDetail" class="user-info-body">
        <div class="user-info-p">
          <p>姓名：{{ memberDetail.userName }}</p>
          <p>手机号：{{ memberDetail.mobilePhone }}</p>
        </div>
        <div class="user-info-p">
          <p>最近充值日期：{{ memberDetail.lastPayTime }}</p>
          <p>本月充值金额：{{ memberDetail.thisMonthPayMoney }}</p>
          <p>本月充值次数：{{ memberDetail.thisMonthPayCount }}</p>
        </div>
        <div class="user-info-p">
          <p>上月剩余次数：{{ memberDetail.lastMonthRemainderCount }}</p>
          <p>本月划卡次数：{{ memberDetail.thisMonthUseCount }}</p>
          <p>本月剩余次数：{{ memberDetail.thisMonthRemainderCount }}</p>
        </div>
      </div>
    </t-card>

    <t-card title="会员使用次数记录" class="container-base-margin-top" :bordered="false">
      <t-form
        ref="form"
        :data="formData"
        :label-width="0"
        style="display: flex"
        colon
        @reset="onReset"
        @submit="onSubmit"
      >
        <t-form-item name="date">
          <t-date-picker v-model="formData.date" mode="month" clearable allow-input />
        </t-form-item>
        <t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }">
          {{ $t('components.commonTable.query') }}
        </t-button>
        <t-button type="reset" variant="base" theme="default">
          {{ $t('components.commonTable.reset') }}
        </t-button>
      </t-form>
      <t-table
        :data="data"
        :columns="COLUMNS"
        :row-key="rowKey"
        :vertical-align="verticalAlign"
        :pagination="pagination"
        :loading="dataLoading"
        :header-affixed-top="headerAffixedTop"
        :stripe="true"
        @page-change="rehandlePageChange"
        @change="rehandleChange"
      >
      </t-table>
    </t-card>
  </div>
</template>

<script lang="ts">
export default {
  name: 'DetailBase',
};
</script>

<script setup lang="ts">
import { PageInfo, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { UserCardLogs, UserUserInfo } from '@/api/member';
import { MemberCardLogsModel, MemberCardLogsParams, MemberDetail, MemberUserInfo } from '@/api/model/memberModel';
import { prefix } from '@/config/global';
import { useSettingStore } from '@/store';

const route = useRoute();
const store = useSettingStore();

interface FormData {
  date: string;
}

const formData = ref<FormData>({
  date: '',
});

const COLUMNS: PrimaryTableCol[] = [
  {
    title: '序号',
    fixed: 'left',
    width: 60,
    ellipsis: true,
    align: 'left',
    colKey: 'serial-number',
  },
  {
    title: '使用日期',
    width: 120,
    ellipsis: true,
    colKey: 'date',
  },
  {
    title: '上次剩余次数',
    width: 90,
    ellipsis: true,
    colKey: 'lastRemainderCount',
  },
  {
    title: '当日使用次数',
    width: 90,
    ellipsis: true,
    colKey: 'changeCount',
  },
  {
    title: '当日剩余次数',
    width: 90,
    ellipsis: true,
    colKey: 'remainderCount',
  },
];

const rowKey = 'index';
const verticalAlign = 'top' as const;

const pagination = ref({
  defaultPageSize: 10,
  total: 10,
  defaultCurrent: 1,
  current: 1,
});

const memberDetail = ref<MemberDetail>(null);
const dataLoading = ref(false);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const userInfoModel: MemberUserInfo = {
      cardId: Number(route.params.id),
    };
    const res = await UserUserInfo(userInfoModel);
    if (res.code === 0) {
      memberDetail.value = res.data;
    }
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};
const cardLogsParams: MemberCardLogsParams = {
  cardId: Number(route.params.id),
  month: '',
  page: 1,
  pageSize: 10,
};

const data = ref<MemberCardLogsModel[]>([]);
const fetchCardLogsData = async () => {
  let dateStr = '';
  if (formData.value.date) {
    const vals = formData.value.date.split('-');
    console.log(vals);
    dateStr = `${vals[0]}${vals[1]}`;
  }
  cardLogsParams.month = dateStr;
  const res = await UserCardLogs(cardLogsParams);
  if (res.code === 0) {
    data.value = res.data.logs;
  }
  pagination.value = {
    ...pagination.value,
    total: res.data.totalCount,
  };
};

onMounted(() => {
  fetchData();
  fetchCardLogsData();
});

const onReset = () => {
  console.log(formData.value);
  cardLogsParams.month = '';
  cardLogsParams.page = 1;
  pagination.value = {
    defaultPageSize: 10,
    total: 10,
    defaultCurrent: 1,
    current: 1,
  };
  fetchCardLogsData();
};
const onSubmit = () => {
  cardLogsParams.page = 1;
  console.log('----', pagination);
  fetchCardLogsData();
};

const rehandlePageChange = (pageInfo: PageInfo, newDataSource: TableRowData[]) => {
  cardLogsParams.page = pageInfo.current;
  cardLogsParams.pageSize = pageInfo.pageSize;
  fetchCardLogsData();
};
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
  console.log('统一Change', changeParams, triggerAndData);
};

const headerAffixedTop = computed(
  () =>
    ({
      offsetTop: store.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any,
);
</script>

<style lang="less" scoped>
.user-info-body {
  padding-left: 20px;

  .user-info-p {
    display: flex;
    margin-bottom: 8px;

    p {
      width: 200px;
    }

    span {
      margin-right: 50px;
    }
  }
}

.container-base-margin-top {
  position: relative;
}

.month-search {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
}
</style>
